<template>
    <!-- Header Start -->
    <view class="card flex">
        <u-image :src="evaluateInfo?.orderGoods?.imageUrl" width="140" height="140"></u-image>
        <view class="ml-[20rpx]">
            <view class="normal font-medium text-xl">{{ evaluateInfo?.orderGoods.goodsName }}</view>
            <view class="mt-[24rpx]">
                <price
                    :price="evaluateInfo?.goodsPrice"
                    :desc="evaluateInfo?.orderGoods.unitName"
                ></price>
            </view>
        </view>
    </view>
    <!-- Header End -->

    <!-- Main Start -->
    <view class="card mt-[20rpx]">
        <view class="flex">
            <text class="normal font-medium text-base mr-[20rpx]">服务评分</text>
            <u-rate
                :count="5"
                v-model="formData.serviceComment"
                :min-count="1"
                inactive-icon="star-fill"
                size="34"
            ></u-rate>
            <view class="ml-[20rpx] lighter text-xs">
                <text v-if="formData.serviceComment === 5">非常好</text>
                <text v-if="formData.serviceComment === 4">好</text>
                <text v-if="formData.serviceComment === 3">一般</text>
                <text v-if="formData.serviceComment === 2">差</text>
                <text v-if="formData.serviceComment === 1">非常差</text>
            </view>
        </view>

        <view class="content mt-[30rpx]">
            <u-input
                v-model="formData.comment"
                type="textarea"
                placeholder="请输入评价内容"
                height="200"
            />
        </view>

        <view class="mt-[30rpx]">
            <Uploader v-model="formData.commentImages" :maxUpload="6" image-fit="aspectFill" />
        </view>
    </view>

    <view class="footer mt-[30rpx]">
        <button
            class="bg-primary text-lg text-white leading-[80rpx] h-[80rpx] rounded-full"
            @click="onSubmit"
        >
            提交
        </button>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { apiEvaluateAdd } from '@/api/user'
import Price from '@/components/price/index.vue'
import Uploader from '@/components/uploader/index.vue'
import { apiOrderDetail } from '@/api/order'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

interface FormDataObj {
    orderId: number
    serviceComment: number | null
    comment: string | number
    commentImages: Array<string | null>
}

const evaluateInfo = ref<any>({})
const formData = ref<FormDataObj>({
    orderId: 0,
    serviceComment: 0,
    comment: '',
    commentImages: []
})

const onSubmit = async (): Promise<void> => {
    try {
        let commentLevel = 0 // 服务评价等级 1 好评 2中评 3差评
        switch (formData.value.serviceComment) {
            case 1:
                commentLevel = 3
                break
            case 2:
                commentLevel = 3
                break
            case 3:
                commentLevel = 2
                break
            case 4:
                commentLevel = 1
                break
            case 5:
                commentLevel = 1
                break
        }
        // return
        if (commentLevel === 0) return uni.$u.toast('请选择服务评分')
        await apiEvaluateAdd({
            ...formData.value,
            commentLevel,
            goodsId: evaluateInfo.value.orderGoods.goodsId,
            userId: userInfo.value.id
        })
        uni.$u.toast('操作成功')
        uni.navigateTo({ url: '/bundle/pages/evaluate_list/index?type=1' })
    } catch (error) {
        console.log('提交评价: ', error)
    }
}

const initEvaluateGoodsInfo = async (): Promise<void> => {
    try {
        const res = await apiOrderDetail({
            id: formData.value.orderId
        })
        evaluateInfo.value = res
    } catch (error) {
        console.log('获取评价: ', error)
    }
}

onLoad((options) => {
    formData.value.orderId = options.id || 0
    initEvaluateGoodsInfo()
})
</script>

<style lang="scss">
.card {
    border-radius: 14rpx;
    background-color: #ffffff;
    margin: 20rpx 20rpx 0 20rpx;
    padding: 30rpx;

    .content {
        padding: 0 24rpx;
        border-radius: 14rpx;
        background-color: #f6f6f6;
    }
}

.footer {
    padding: 0 30rpx;
}
</style>
